<script setup>

import EventMaterial from "pages/answer-com/eventMaterial.vue";
let prop = defineProps(['msg','eventName'])
const downFile = (url) => {
    // window.open(`112.192.23.17:5081/downloadfie?object=${x.down_url_kbbg}`)
    window.open(`http://112.192.23.17:5081/downloadfie?object=${url}`)
}
</script>

<template>
    <div class="answer-me">
        <div class="answer-icon">
            <img src="../../assets/images/panda.png" alt="">
        </div>
        <div class="me-ques">
        <div class="bg">
            <div class="ti">为您查询出{{prop.eventName}}需要提交以下材料：</div>
            <div class="material-list">
                <div class="mm" v-for="(x,i) in prop.msg">
                    <span class="index">{{i+1}},</span>
                    <span class="com">{{x['material_name'].String || x['material_name']}}</span>
                    <span class="com">{{x['material_zzfs']}}份</span>
                    <span class="t1" v-show="x['down_url_slyb']" @click="downFile(x['down_url_slyb'])">下载样本</span>
                    <span class="t1" v-show="x['down_url_kbbg']" @click="downFile(x['down_url_kbbg'])">下载空白表格</span>
                </div>
            </div>
            <div class="tis">您可以通过提问框上传以上文件到小旌,获取点击材料名称后的按钮可下载</div>
        </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.answer-me{
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    .answer-icon{
        width: 30px;
        height: 30px;
        position: relative;
        top:5px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .me-ques{
        background-color: white;
        border-radius: 10px;
        padding: 10px;
        margin-left: 10px;
        letter-spacing: 2px;
        position: relative;
        .bg{
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
        }
        .ti{
            font-weight: bold;
            font-size: 16px;
        }
        .you{
            position: absolute;
            width: 30px;
            height: 30px;
            right: 10px;
            top:10px;
        }
        .material-list{
            .mm{
                padding-top: 10px;
                padding-left: 20px;
                font-size: 14px;
                .com{
                    padding-right: 20px;
                }
                .t1{
                    margin-left: 20px;
                    color: #b5b5b5;
                    font-size: 12px;
                    cursor: pointer;
                }
                .t1:hover{
                    transition: all .3s;
                    color: #F2C037;
                }
            }
        }
        .tis{
            padding-top: 10px;
            font-size: 12px;
            color: gainsboro;
            padding-left: 20px;
        }
    }
}
.extend{
    width: calc(100% - 45px);
    margin-left: 45px;
    height: 200px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    .e1{
        padding-bottom: 10px;
    }
    .e2{
        display: flex;
        .e2-list{
            padding: 5px 15px;
            border-radius: 5px;
            background-color: #e5e5e5;
            margin-right: 10px;
        }
        .e2-list:hover{
            scale: 1.1;
            transition: all .3s;
            cursor: pointer;
        }
    }
    .e3{
        .e3-tit{
            padding-top: 10px;
        }
        .e3-list{
            padding-left: 20px;
            padding-top: 5px;
            cursor: pointer;
            span:hover{
                border-bottom: 2px solid #e5e5e5;
            }
        }
    }
}

</style>
